import { ArrowDownOnSquareIcon, ArrowDownTrayIcon, ChevronDownIcon, ChevronRightIcon, ChevronUpIcon } from "@heroicons/react/24/outline";
import AppBar from "@/components/layouts/AppBar";
import Layout from "@/components/layouts/Layout";
import LineDivider from "@/components/elements/LineDivider";
import WithAuth from "@/components/auth/WithAuth";
import { useState } from "react";

const Row = ({ label, children }) => (
  <div className="grid grid-cols-2">
    <p className="leading-normal text-gray_r-11">{ label }</p>
    <div className="text-right leading-normal">
      { children }
    </div>
  </div>
);

const Section = ({ children }) => (
  <div className="px-4 pb-4 flex flex-col gap-y-4">
    { children }
  </div>
);

const TitleRow = ({ label, active, onClick }) => (
  <div className="flex justify-between p-4" onClick={onClick}>
    <p className="font-medium leading-normal">{ label }</p>
    { onClick && ( active ? (
      <ChevronUpIcon className="w-5 h-5" />
    ) : (
      <ChevronDownIcon className="w-5 h-5" />
    ) ) }
  </div>
);

export default function DetailTransactions() {
  const [ activeSection, setActiveSection ] = useState({
    purchase: false,
    shipping: false,
    invoice: false,
  });

  const toggleSection = ( name ) => {
    setActiveSection({
      ...activeSection,
      [name]: !activeSection[name] 
    });
  };

  return (
    <WithAuth>
      <Layout>
        <AppBar title="Detail Transaksi" />

        <div className="text-caption-1">
          <div className="p-4 flex flex-col gap-y-4">
            <Row label="Status Transaksi">
              <span className="badge-green">Pending Quotation</span>
            </Row>
            <Row label="No Transaksi">SO/2023/03212</Row>
            <Row label="Purchase Order">PO/2023/02123</Row>
            <Row label="Dokumen PO"><a href="">Download</a></Row>
            <Row label="Metode Pembayaran">BCA Transfer</Row>
            <Row label="Ketentuan Pembayaran">Cash Before Delivery</Row>
            <Row label="Nama Sales">Rafi Zadanly</Row>
            <Row label="Waktu Transaksi">01 Januari 2023</Row>
          </div>

          <LineDivider />

          <TitleRow 
            label="Detail Produk" 
            active={false} 
          />

          <LineDivider />

          <TitleRow 
            label="Detail Pembeli" 
            active={activeSection.purchase} 
            onClick={() => toggleSection('purchase')} 
          />
          { activeSection.purchase && (
            <Section>
              <Row label="Nama">John Doe</Row>
              <Row label="Email">johndoe@gmail.com</Row>
              <Row label="No Telepon">081223538754</Row>
              <Row label="Alamat">Jalan Bandengan Utara No 85A, Kel. Penjaringan, Kec. Penjaringan, Jakarta Utara</Row>
            </Section>
          ) }

          <LineDivider />

          <TitleRow 
            label="Detail Pengiriman" 
            active={activeSection.shipping} 
            onClick={() => toggleSection('shipping')} 
          />
          { activeSection.shipping && (
            <Section>
              <Row label="Nama">John Doe</Row>
              <Row label="Email">johndoe@gmail.com</Row>
              <Row label="No Telepon">081223538754</Row>
              <Row label="Alamat">Jalan Bandengan Utara No 85A, Kel. Penjaringan, Kec. Penjaringan, Jakarta Utara</Row>
            </Section>
          ) }

          <LineDivider />

          <TitleRow 
            label="Detail Penagihan" 
            active={activeSection.invoice} 
            onClick={() => toggleSection('invoice')} 
          />
          { activeSection.invoice && (
            <Section>
              <Row label="Nama">John Doe</Row>
              <Row label="Email">johndoe@gmail.com</Row>
              <Row label="No Telepon">081223538754</Row>
              <Row label="Alamat">Jalan Bandengan Utara No 85A, Kel. Penjaringan, Kec. Penjaringan, Jakarta Utara</Row>
            </Section>
          ) }

        </div>
      </Layout>
    </WithAuth>
  );
}